<template>
  <div>
    <el-card>
      <!-- 顶部面包屑标识与导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
        <el-breadcrumb-item :to="{ path: '/' }">
          <i class="el-icon-s-promotion"></i> 后台管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>发票管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <el-row  style="margin-top: 10px">
        <download-excel
            style="float: left"
            class="export-excel-wrapper"
            :data="invoiceData"
            type="xls"
            worksheet="worksheet"
            :fields="fields"
            name="发票信息">
          <el-button type="primary">导出</el-button>
        </download-excel>
      </el-row>

      <el-table
          :data="invoiceData"
          style="width: 100%">
        <el-table-column
            type="index"
            label="编号"
            width="80">
        </el-table-column>
        <el-table-column
            prop="orderNo"
            label="订单号"
            width="180">
        </el-table-column>
        <el-table-column
            align="center"
            prop="title"
            label="发票抬头"
            width="200">
        </el-table-column>
        <el-table-column
            align="center"
            prop="taxNumber"
            label="税号">
        </el-table-column>
        <el-table-column
            align="center"
            prop="userName"
            label="用户名">
        </el-table-column>
        <el-table-column
            align="center"
            prop="phone"
            label="电话">
        </el-table-column>
        <el-table-column
            align="center"
            prop="address"
            label="地址">
        </el-table-column>
        <el-table-column
            align="center"
            label="订单状态">
          <template slot-scope="scope">
            <el-tag type="primary">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="content"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="showDetail(scope.row)" type="primary" style="margin-left: 16px;">
              查看发票
            </el-button>

            <el-dialog class="detail" title="发票详情" :visible.sync="dialogVisibleOrder" width="750px">
              <el-descriptions :column="1" border label-class-name="description-label">
                <el-descriptions-item label="发票编号">{{gridData.id}}</el-descriptions-item>
                <el-descriptions-item label="订单号">{{gridData.orderNo}}</el-descriptions-item>
                <el-descriptions-item label="产品">{{gridData.subject}}</el-descriptions-item>
                <el-descriptions-item label="抬头">{{gridData.title}}</el-descriptions-item>
                <el-descriptions-item label="税号">{{gridData.taxNumber}}</el-descriptions-item>
                <el-descriptions-item label="用户名">{{gridData.userName}}</el-descriptions-item>
                <el-descriptions-item label="地址">{{gridData.address}}</el-descriptions-item>
                <el-descriptions-item label="内容">{{gridData.content}}</el-descriptions-item>
                <el-descriptions-item label="电话号码">{{gridData.phone}}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{gridData.createTime}}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{gridData.updateTime}}</el-descriptions-item>
                <el-descriptions-item label="状态"><el-tag type="primary">{{gridData.status}}</el-tag></el-descriptions-item>
              </el-descriptions>
              <div v-if="gridData.status==='申请中'" style="margin-top: 10px" align="center">
                <el-button type="primary" @click="apply(gridData.id,'APPROVED')">批准</el-button>
                <el-button type="danger" @click="apply(gridData.id,'FAILED')" style="margin-left: 100px">回绝</el-button>
              </div>
            </el-dialog>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="changePage"
          layout="total, prev, pager, next"
          :hide-on-single-page="true"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total">
      </el-pagination>


    </el-card>
  </div>
</template>

<script>
export default {
  name: "Invoice",
  data(){
    return{
      // 分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: '',
      total:'',
      content:'',
      editRules:[],
      categoryDataOptions:[],
      invoiceData:[],
      newForm:{},
      editForm:{},
      dialogVisibleOrder:false,
      gridData:'',
      fields: {编号: 'id', 订单号: 'orderNo', 用户: 'userName',产品: 'subject', 发票内容: 'content',  抬头: 'title', 税号: 'taxNumber', 状态: 'status',
        电话: 'phone', 地址: 'address', 创建时间: 'createTime',更新时间:'updateTime'},
    }
  },
  methods: {
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadBlogList();
    },

    //打开弹窗
    showDetail(detail) {
      this.gridData = detail;
      this.dialogVisibleOrder = true;
    },
    //加载列表
    loadOrderList(){
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:8080/v1/invoices/list").then((response) => {
        if (response.data.code == 1) {
          this.invoiceData = response.data.data;
          this.judgeStatus();
          console.log(this.invoiceData)
        }
      })
    },
    //判断状态
    judgeStatus(){
      for (let i = 0; i < this.invoiceData.length; i++) {
        if(this.invoiceData[i].status==='APPLYING'){
          this.invoiceData[i].status='申请中';
        }
        if(this.invoiceData[i].status==='APPROVED'){
          this.invoiceData[i].status='申请成功';
        }
        if(this.invoiceData[i].status==='FAILED'){
          this.invoiceData[i].status='申请失败';
        }
      }
    },
    apply(id,status){
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post("http://localhost:8080/v1/invoices/"+id+"/"+status+"/update").then((response) => {
        if (response.data.code == 1) {
          this.$message({
            message: '审批完成！',
            type: 'success'
          });
          this.dialogVisibleOrder=false;
          this.loadOrderList();
        }
      })
    }
  },
  mounted() {
    this.loadOrderList();
  },
}
</script>

<style scoped>

</style>